<template>
  <div class="page">
    <!-- 顶部筛选 开始 -->
    <div class="top_filter">
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="combinedId"
          :options="combinedList"
          @change="onChange"
        />
        <!-- <van-dropdown-item v-model="city" :options="areaList" @change="onChange" /> -->
        <van-dropdown-item
          v-model="projectId"
          :options="projectList"
          @change="onChange"
        />
      </van-dropdown-menu>
    </div>
    <!-- 顶部筛选 end -->

    <!-- 商品列表 开始 -->
    <div class="goods_list">
      <template v-if="goodsList && goodsList.length">
        <goods
          v-for="(item, index) in goodsList"
          :key="`doctor_${index}`"
          :info="item"
        ></goods>
      </template>
      <no-data v-else></no-data>
    </div>
    <!-- 商品列表 end -->
  </div>
</template>
<script>
import { DropdownMenu, DropdownItem } from "vant";
import Goods from "@/components/goods/index.vue";
import {
  PLATFORM_TYPE,
  GET_GOODS_SEARCH,
  GET_HOSPITAL_PROJECT_OPTIONS,
  GET_DOCTOR_CITY_OPTIONS,
  GET_SEO_SETTING_INFO,
} from "@/http/interface";
export default {
  components: {
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    Goods,
  },
  data() {
    return {
      combinedId: "",
      city: "",
      projectId: "",
      combinedList: [
        { text: "默认排序", value: "" },
        { text: "价格排序", value: 1 },
        // { text: "销量排序", value: 2 },
      ],
      projectList: [],
      areaList: [],
      goodsList: [],
      seoInfo: {},
    };
  },
  head() {
    return {
      title: this.seoInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.seoInfo.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.seoInfo.keywords,
        },
      ],
      link:[
        {ref:'canonical',href:`${this.$domain}/shop`}
      ]
    };
  },
  watchQuery: true,
  async asyncData({ query, $axios, $cookies }) {
    let city = $cookies.get("city");
    let oParams = { pageNumber: 1, pageSize: 10000 };
    if (city && city != "全国") {
      oParams.city = city;
    }

    let combinedId = Number(query.combinedId) || "";
    //let city = query.areaId || "";
    let projectId = Number(query.projectId) || "";

    oParams.combinedId = combinedId;
    //oParams.city = city;
    oParams.projectId = projectId;

    let g = await $axios.get(GET_GOODS_SEARCH, { params: oParams });
    let gres = g.data || {};
    let goodsList = gres.list || [];

    // 所在地区
    let areaList = [{ text: "所在地区", value: "" }];
    let a = await $axios.get(GET_DOCTOR_CITY_OPTIONS);
    (a.data || []).map((k) => {
      k.text = k.name;
      k.value = k.code;
      areaList.push(k);
    });

    // 口腔项目
    let projectList = [{ text: "口腔项目", value: "" }];
    let p = await $axios.get(GET_HOSPITAL_PROJECT_OPTIONS);
    (p.data || []).map((k) => {
      k.text = k.name;
      k.value = k.id;
      projectList.push(k);
    });

    // 获取seo配置
    let seo = await $axios.get(GET_SEO_SETTING_INFO, {
      params: { type: 3, platform: PLATFORM_TYPE },
    });
    let seoInfo = seo.data || {};

    console.log(goodsList);
    return {
      goodsList,
      areaList,
      projectList,
      combinedId,
      projectId,
      seoInfo,
    };
  },
  methods: {
    // 监听下拉菜单
    onChange(e) {
      let params = this.$route.query;
      console.log(params);
      this.$router.replace({
        path: "/shop",
        query: {
          ...params,
          combinedId: this.combinedId,
          areaId: this.city,
          projectId: this.projectId,
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/goods.less";
</style>